<template>
    <div class="center bg">
        <div class="pir" v-for="(item, index) in pirurl" :key="index">
            <img :src="item.picUrl" alt="" width="70%" height="100px"><span style="color: white;">1</span>
            <p>{{ item.desc }}</p>
        </div>


        <div class="cerdr" v-for="(item, index) in add[0]" @click="more(item)">
            <img :src="item.picUrl" alt="" width="70px" height="70px">
            <p>{{ item.name }}</p>
        </div>
    </div>
</template>
<script>
import right from "../views/classify/index.vue"
import { Mess, loginIn } from "../api/index"
export default {
    name: "right",
    props: ["message"], //接收父组件传过来的值，这是稍微高级一点的写法，也可以props:[' message'
    data() {
        return {
            childrenMessage: "",
            pirurl: [],
            add: [],
            deta: ""
        }
    },
    methods: {
        more(item) {
            console.log(item)
            console.log(this.childrenMessage)
            // this.$router.push({path:"/details"})

            this.$router.push({
                path: '/details',
                query: {
                    id: item,
                    index:item.id
                }
            })
        }

    },
    mounted() {


    },
    beforeUpdate() {

    },
    watch: {
        message(val) {
            console.log(val)
            this.childrenMessage = val
            console.log(this.childrenMessage)
            Mess({ id: this.childrenMessage }).then(res => {
                console.log(res.data.data)
                this.deta = ""
                this.deta=res.data.data
                this.pirurl = []
                this.add = []
                this.pirurl.push(res.data.data.currentCategory)
                this.add.push(res.data.data.currentSubCategory)
                console.log(this.add)
            })
        }
    }
}
</script>
<style lang="scss">
.center {
    width: 100%;
}

.pir {
    width: 100%;
    text-align: right;
    // border: 1px solid red;
    padding-right: 20x;

    img {
        margin-left: -20px;
    }

    p {
        text-align: center;
        font-family: PingFangSC-Light, helvetica, Heiti SC;
        font-size: 13px;
    }
}

.cerdr {
    width: 32%;
    // border: 1px solid red;
    height: 100px;
    text-align: center;
    float: left;

    p {
        margin: 0;
        font-size: 14px;
    }
}

.van-sidebar-item {

    background-color: white !important;
}

.van-sidebar-item--select,
.van-sidebar-item--select:active {
    color: red;
}</style>